<div class="navbar bg-base-100 shadow-md flex">
  <div class="tabs">
    <a
      routerLink="/"
      routerLinkActive="tab-active"
      [routerLinkActiveOptions]="{ exact: true }"
      class="tab"
    >
      Welcome
    </a>
    <a
      routerLink="/element-ref"
      routerLinkActive="tab-active"
      [routerLinkActiveOptions]="{ exact: true }"
      class="tab"
    >
      ElementRef
    </a>
    <a
      routerLink="/view-ref"
      routerLinkActive="tab-active"
      [routerLinkActiveOptions]="{ exact: true }"
      class="tab"
    >
      ViewRef
    </a>
    <a
      routerLink="/template-ref"
      routerLinkActive="tab-active"
      [routerLinkActiveOptions]="{ exact: true }"
      class="tab"
    >
      TemplateRef
    </a>
    <a
      routerLink="/view-container-ref"
      routerLinkActive="tab-active"
      class="tab"
    >
      ViewContainerRef
    </a>
  </div>
</div>
<section class="flex flex-col items-center mt-8">
  <router-outlet></router-outlet>
</section>
